<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta name="robots" content="noindex">


    <style>
        body {
        overflow: hidden;
    }

    h1 {
        font: normal bold 36px/36px Helvetica, sans-serif;
        margin: 0;
        padding-top: 20%;
        text-align: center;
        text-shadow: 3px 3px rgba(0, 0, 0, .25);
    }
    .panel {
        -webkit-transition: left .4s ease;
        -moz-transition: left .4s ease;
        -o-transition: left .4s ease;
        transition: left .4s ease;
        cursor: pointer;
        color: white;
        top: 0;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .is-anchored #panel-main {
        left: 0;
    }

    .is-anchored #panel-sidebar {
        left: 100%;
    }

    #panel-main {
        background: #EC6C20;
        left: -100%;
    }

    #panel-sidebar {
        background: #3CB5B5;
        left: 0;
    }
    </style>
</head>

<body class="is-anchored">
<div id="panel-main" class="panel">
    <h1>1</h1>
    <h1>Click me to slide panel</h1>
    <h1>Кликни для смены панели</h1>
</div>
<div id="panel-sidebar" class="panel">
    <h1>2</h1>
    <h1>Click me to slide panel</h1>
    <h1>Кликни для смены панели</h1>
</div>



<script src="../scripts/jquery/2.1.3/jquery.js"></script>

<script>
    $(document).ready(function() {

    var $body = $(document.body);
    var $panels = $('.panel');
    var dom_classname = 'is-anchored';

    $panels.on('click', function() {
        $body.toggleClass(dom_classname);
    });

});
//# sourceURL=pen.js
</script>
</body></html>